<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$.getJSON("movies.JSON", function(data) {
		movies = data;
	});
	$("#genJson").click(function(){
		var movie = {
			id : movies.length,
			title : $("#title").val(),
			originalTitle : $("#originalTitle").val(),
			image : $("#image").val(),
			year : $("#year").val(),
			genre: $("#genre").val().split(","),
			mpaa: $("#MPAA").val(),
			duration: $("#duration").val(),
			video1: $("#qualityImage1").val(),
			video2: $("#qualityImage2").val(),
			audio1: $("#audio1").val(),
			audio2: $("#audio2").val(),
			date: $("#year").val()+"-"+$("#month").val()+"-"+$("#day").val(),
			imdbRating: $("#imdbRating").val(),
			imdbCode: $("#imdbCode").val(),
			youTube: $("#youTube").val(),
			sinopsis: $("#sinopsis").val()
		};
		movies[movies.length] = movie;
		$("#jsonOutput").html(JSON.stringify(movies, null, 4));
	});
});
</script>
</head>
<body>
<div id="top">
	<div class="util">
		<div id="titleTop">Jukebox</div>
		<input type="text" class="search" placeholder="Buscar"/>
	</div>
</div>
<div class="util"
	<form>
	<table border="0" width="50%" align="center" style="margin-top:40px">
	<tr>
		<td>
			Titulo
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="title"/>
		</td>
	</tr>
	<tr>
		<td>
			Titulo original
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="originalTitle"/>
		</td>
	</tr>
	<tr>
		<td>
			Caratula
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="image"/>
		</td>
	</tr>
	<tr>
		<td>
			Año
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="year"/>
		</td>
	</tr>
	<tr>
		<td>
			Genero(s)
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="genre"/> (Separar por comas)
		</td>
	</tr>
	<tr>
		<td>
			Clasificación MPAA
		</td>
		<td>
			:
		</td>
		<td>
			<select id="MPAA">
				<option value=""> </option>
				<option value="G">G: Apta para todo público</option>
				<option value="PG">PG: Apta mayores de 10 años</option>
				<option value="PG-13">PG-13: Apta mayores de 13 años</option>
				<option value="R">R: Apta mayores de 17 años</option>
				<option value="NC-17">NC-17: Apta mayores de 18 años</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>
			Duración
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="duration"/> (Minutos)
		</td>
	</tr>
	<tr>
		<td>
			Calidad imagen
		</td>
		<td>
			:
		</td>
		<td>
			<select id="qualityImage1">
				<option value=""> </option>
				<option value="DVDRip">DVDRip</option>
				<option value="720p">720p</option>
				<option value="1080p">1080p</option>
				<option value="3D">3D</option>
			</select>
			, 
			<select id="qualityImage2">
				<option value=""> </option>
				<option value="DVDRip">DVDRip</option>
				<option value="720p">720p</option>
				<option value="1080p">1080p</option>
				<option value="3D">3D</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>
			Audio
		</td>
		<td>
			:
		</td>
		<td>
			<select id="audio1">
				<option value=""> </option>
				<option value="Español Latino">Español Latino</option>
				<option value="Castellano">Castellano</option>
				<option value="Ingles">Ingles</option>
				<option value="Frances">Frances</option>
				<option value="Japones">Japones</option>
			</select>
			, 
			<select id="audio2">
				<option value=""> </option>
				<option value="Castellano">Castellano</option>
				<option value="Ingles">Ingles</option>
				<option value="Frances">Frances</option>
				<option value="Japones">Japones</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>
			Fecha estreno
		</td>
		<td>
			:
		</td>
		<td>
			<select id="day">
				<option value=""> </option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
			</select>
			/
			<select id="month">
				<option value=""> </option>
				<option value="1">Enero</option>
				<option value="2">Febrero</option>
				<option value="3">Marzo</option>
				<option value="4">Abril</option>
				<option value="5">Mayo</option>
				<option value="6">Junio</option>
				<option value="7">Julio</option>
				<option value="8">Agosto</option>
				<option value="9">Septiembre</option>
				<option value="10">Octubre</option>
				<option value="11">Noviembre</option>
				<option value="12">Diciembre</option>
			</select>
			/
			<select id="year">
				<option value=""> </option>
				<option value="1990">1990</option>
				<option value="1991">1991</option>
				<option value="1992">1992</option>
				<option value="1993">1993</option>
				<option value="1994">1994</option>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997">1997</option>
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
				<option value="2001">2001</option>
				<option value="2002">2002</option>
				<option value="2003">2003</option>
				<option value="2004">2004</option>
				<option value="2005">2005</option>
				<option value="2006">2006</option>
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
				<option value="2011">2011</option>
				<option value="2012">2012</option>
				<option value="2013">2013</option>
				<option value="2014">2014</option>
			</select>
		</td>
	</tr>
	<tr>
		<td>
			Nota IMDB
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="imdbRating"/>
		</td>
	</tr>
	<tr>
		<td>
			Código IMDB
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="imdbCode"/>
		</td>
	</tr>
	<tr>
		<td>
			YouTube Trailer
		</td>
		<td>
			:
		</td>
		<td>
			<input type="text" id="youTube"/>
		</td>
	</tr>
	<tr valign="top">
		<td>
			Sinopsis
		</td>
		<td>
			:
		</td>
		<td>
			<textarea id="sinopsis" style="width:100%; height:100px;"></textarea> 
		</td>
	</tr>
	<tr>
	<td colspan="3" align="center"><button type="reset" value="Limpiar">Limpiar</button> <button id="genJson" value="Generar JSON">Generar JSON</button></td>
	</tr>
	</table>
	</form>
	<fieldset style="width:50%; min-height:100px; margin:0 auto;">
	<legend>JSON Generado</legend>
	<div id="jsonOutput"></div>
	</fieldset>
</div>
</body>
</html>